﻿@model WebExtras.JQFlot.FlotChart

<div class="well ui-well">
  <h4>Setting up a custom formatter</h4>
  <p>
    In order to allow you to create custom data formatters i.e any function definitions available in the Flot
  library, WebExtras provides the <strong>WebExtras.Core.JsFunc</strong> class.
  </p>
  <p>Let's setup a custom tick formatter as shown in the Flot API @Html.Hyperlink("here", "https://github.com/flot/flot/blob/master/API.md") for our X axis.</p>
  <p>Markup</p>
  <pre><code>
  <span class="comment">// Lets setup the X axis's tick formatter</span>
  FlotOptions options = new FlotOptions
  {
    xaxis = new AxisOptions
    {
      tickDecimals = 2,
      tickFormatter = new JsFunc
      {
        ParameterNames = new string[] { "val", "axis" },
        Body = "return val.toFixed(axis.tickDecimals);"
      }
    }
  };
  </code></pre>
  <p>All the remaining process remains the same i.e creating the series and any other options you want.</p>
  <p>Output</p>
  <pre><code>
  <span class="comment">// This is how our Flot options will get serialized down</span>
  options = {
    "xaxis": {
      "tickFormatter": function (val, axis) { return val.toFixed(axis.tickDecimals); },
      "tickDecimals": 2
    }
  };    
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And the actual graph</h4>
  <div class="content">
    <div id="custom-graph" class="graph">
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $.plot($('#custom-graph'), [@Html.Raw(Model.chartSeries[0].ToString())], @Html.Raw(Model.chartOptions.ToString()));    
      });
    </script>
  </div>
</div>
